<template>
	<view class="older">
		<image class="app_bg" src="https://sspzjz.oss-cn-shanghai.aliyuncs.com/yys/bj.png" />
		<scroll-view scroll-x class="older_type">
			<view class="older_typeItem" @click="changeType(item.type)"
			 :class="{'older_typeItem_sel':orderType==item.type}"
			  v-for="(item) in typeList" :key="item.type">
				{{ item.title }}
			</view>
		</scroll-view>
		<scroll-view scroll-y @scrolltolower="scrolltolower">
			<view v-if="!currentList || currentList.length == 0" class="nolder">
				暂无订单
			</view>
			<view class="older_item" v-for="(item, index) in currentList" :key="index">
				<view class="older_header">
					<view class="older_header_left">
						订单：{{ item.packageName }}
					</view>
					<view v-if="item.payStatus != 1" class="older_header_right older_header_noPay">
						未付款
					</view>
					<view v-else class="older_header_right older_header_pay">
						已付款
					</view>
				</view>
				<view class="older_content">
					<view class="older_image">
						<image src="../../static/my/myOlder_icon.png" />
					</view>
					<view class="older_sub">
						<view class="older_sub1">{{item.userName}} {{item.sex}}</view>
						<view class="older_sub2" v-if="item.birthday">公历生日 {{ item.birthday }}</view>
						<view class="older_sub2" v-if="item.birthTime">出生时辰 {{ item.birthTime }}</view>
					</view>
				</view>
				<view class="older_content" v-if="item.womanName">
					<view class="older_image">
						<image src="../../static/my/gril_icon.png" />
					</view>
					<view class="older_sub">
						<view class="older_sub1">{{item.womanName}} 女</view>
						<view class="older_sub2" v-if="item.womanBirthday">公历生日 {{ item.womanBirthday }}</view>
						<view class="older_sub2" v-if="item.womanBirthtime">出生时辰 {{ item.womanBirthtime }}</view>
					</view>
				</view>
				<view class="older_btnBox">
					<view class="older_btn older_normal" @click="cancelOlder(item)">取消</view>
					<view class="older_btn older_normal" @click="toPages('result', item)">查看结果</view>
					<view class="older_btn older_pay" @click="payMoney(item)" v-if="item.payStatus != 1">去付款</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script setup>
	import request from '../../common/js/request'
	import {
		ref,
		reactive
	} from "vue";
	import { onLoad, onShow } from '@dcloudio/uni-app'
	import { uniPay } from '@/common/js/method.js'

	onLoad((opt)=>{
	})
	onShow(()=>{
		pageSet.value.pageNo = 1;
		getOrderList();
	})
	
	const typeList = [
		{ title: '全部', type: '' },
		{ title: '八字详解', type: 13 },
		{ title: '八字合婚', type: 14 },
		{ title: '紫薇斗数', type: 15 },
		{ title: '算姻缘',   type: 16 },
		{ title: '起名取名', type: 17 },
	]
	// 套餐类型
  let orderType = ref('');
  const currentList = ref([]);
	let pageSet = ref({
		pageNo: 1,
		pageSize: 10,
		total: 0,
	})
  
	const changeType = function (type) {
		orderType.value = type;
		pageSet.value.pageNo = 1;
		getOrderList();
	}

	const getOrderList = function () {
		if(pageSet.value.pageNo == 1) {
			currentList.value = [];
		}
		let params = {
			...pageSet.value,
		}
		if(orderType.value != '') {
			params.orderType = orderType.value;
		}
		request('/api/busi/busi/yys/order/page', params).then((res)=>{
			if(res.status == 200) {
				pageSet.value.total = res.data.total;
				if(res.data.orders.length) {
					currentList.value = currentList.value.concat(res.data.orders);
				}
			}
		})
	};

  const toPages = function (type, data) {
		let path = '';
		if(type == 'result') {
			if(data.orderType == 17) {
				path = '/pages/giveName/recommendation'
			}else {
				path = '/pages/result/index'
			}
		}
    uni.navigateTo({
      url: path + '?id=' + data.id
    });
  }
	const cancelOlder = function (data) {
		let params = {
			id: data.id
		}
		uni.showModal({
			title: `是否${data.payStatus == 1 ? '删除' : '取消'}该测算订单`,
			success(res) {
				if(res.confirm) {
					request('/api/busi/busi/yys/order/delete', params).then((res)=>{
						if(res.status == 200) {
							uni.showTotal({
								icon: 'none',
								title: `${data.payStatus == 1 ? '删除' : '取消'}成功`,
							})
							pageSet.value.pageNo = 1;
							getOrderList();
						}
					})
				}
			}
		})
	}
	const payMoney = function (data) {
		let params = {
			id: data.id,
			payType: 2
		}
		request('/api/busi/busi/yys/order/pay', params).then((res)=>{
			if(res.status == 200) {
				uniPay(res.data).then((res)=>{
					pageSet.value.pageNo = 1;
					getOrderList();
				});
			}
		})
	}

	const scrolltolower = function() {
		let { pageNo, pageSize, total } = pageSet.value;
		if((pageNo * pageSize) < total) {
			pageSet.value.pageNo = pageNo + 1;
			getOrderList();
		}
	}
</script>

<style lang="scss" scoped>
.older {
	padding: 30rpx;
	box-sizing: border-box;
	.older_type {
		white-space: nowrap;
		margin-bottom: 36rpx;
		.older_typeItem {
			display: inline-block;
			padding: 12rpx 0;
			margin-right: 32rpx;
			font-size: 28rpx;
			font-weight: 500;
			letter-spacing: 0;
			line-height: 40.5rpx;
			color: rgba(117, 72, 59, 1);
			border-bottom: 6rpx solid transparent;
			&:last-child {
				margin-right: 0;
			}
		}
		.older_typeItem_sel {
			font-weight: bold;
			border-bottom-color: rgba(117, 72, 59, 1);
		}
	}
	.nolder {
		margin-top: 30rpx;
		text-align: center;
    font-size: 0.32rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 0.46rem;
    color: #75483b;
	}
	.older_item {
		background-color: #ffffff;
		border-radius: 20rpx;
		margin-bottom: 20rpx;
	}
	.older_header {
		padding: 16rpx 32rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}
	.older_header_left {
		font-size: 28rpx;
		font-weight: 700;
		letter-spacing: 0;
		line-height: 44rpx;
		color: rgba(56, 56, 56, 1);
	}
	.older_header_right {
		padding: 4rpx 18rpx;
		border-radius: 2px;
		font-size: 24rpx;
		font-weight: 400;
		letter-spacing: 0;
		line-height: 36rpx;
	}
	.older_header_noPay {
		background: rgba(255, 195, 0, 1);
		color: rgba(255, 255, 255, 1);
	}
	.older_header_pay {
		background: rgba(229, 229, 229, 1);
		color: rgba(166, 166, 166, 1);
	}
	.older_content {
		display: flex;
		justify-content: flex-start;
		padding: 8rpx 20rpx;
	}
	.older_image {
		margin-right: 16rpx;
		width: 48rpx;
		height: 48rpx;
		&>image {
			width: 100%;
			height: 100%;
		}
	}
	.older_sub {
		flex: 1;
		.older_sub1 {
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 42rpx;
			color: rgba(56, 56, 56, 1);
		}
		.older_sub2 {
			margin-top: 10rpx;
			font-size: 28rpx;
			font-weight: 400;
			letter-spacing: 0;
			line-height: 44rpx;
			color: rgba(128, 128, 128, 1);
		}
	}
	.older_btnBox {
		width: 100%;
		display: flex;
		justify-content: flex-end;
		align-items: center;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		border-top: 2rpx solid #F6F6F6;
		.older_btn {
			margin-left: 20rpx;	
			border-radius: 40rpx;
			padding: 8rpx 48rpx;
			border: 2rpx solid transparent;
		}
		.older_normal {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 36rpx;
			color: rgba(56, 56, 56, 1);
			border-color: #F6F6F6;
		}
		.older_pay {
			font-size: 24rpx;
			font-weight: 400;
			letter-spacing: 0px;
			line-height: 36rpx;
			color: rgba(255, 255, 255, 1);
			border-color: #2A82E4;
			background-color: #2A82E4;
		}
	}
}
</style>